<template>
    <div class="an-page-children an-edit-password">
        <van-nav-bar
            title="修改密码"
            left-text=""
            left-arrow
            @click-left="clickBack"
            />

        <van-form ref="anForm" @submit="onSubmit" class="an-form">
            <van-field
                v-model="oldPassword"
                type="password"
                name="oldPassword"
                label="原始密码"
                placeholder="原始密码"
                :rules="[{ required: true, message: '请填写旧密码' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ validator:validaPassword, message: '请填写新密码' }]"
            />
            <van-field
                v-model="password2"
                type="password"
                name="password2"
                label="确认密码"
                placeholder="密码"
                :rules="[{ validator:validaPassword2, message: msgPassword2 }]"
            />

            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="submit" :loading="loading" :disabled="loading">
                提交
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<script>
import md5 from 'js-md5';
import { mapState } from "vuex";
export default {
  data() {
    return{
      oldPassword:"",
      password: '',
      password2:'',
      loading: false
    };
  },
  computed: mapState(['userInfo']),
  mounted() {
  },
  methods:{

    // 提交表单
    onSubmit(val) {
      let nd = Object.assign(val);
      nd.id = this.userInfo.id;
      nd.username = this.userInfo.username;
      nd.password = md5(nd.password);
      nd.oldPassword = md5(nd.oldPassword);
      delete nd.password2;
      this.loading = true;
      this.checkOldPassword(nd,() => {
        this.$api.userUpdate(nd).then(() => {
          this.loading = false;
          this.$toast.success('修改成功,请重新登录');
          this.clearForm();
          // 1秒后跳转登录页面
          setTimeout(() => {
            this.$store.dispatch('loginOut');
            this.$router.push({path:'/login'});
          },1000);
        });
      });
    },

    // 检查旧密码是否正确
    checkOldPassword(val, callBack) {
      let nd = {
        username: val.username,
        password: val.oldPassword
      };
      this.$api.login(nd).then(() => {
        callBack();
      }).catch(() => {
        this.oldPassword = '';
        this.loading = false;
      });
    },

    // 密码校验
    validaPassword(val) {
      if(!val) {
        return false;
      }else if(val.length<4) {
        return false;
      }else if(this.password2 !== '') {
        this.$refs.anForm.validate('password2').then().catch(e => {console.log(e);});
        return;
      }else{
        return true;
      }
    },
    // 第二次输入密码 校验
    validaPassword2(val) {
      if(!val) {
        return false;
      }else if(val != this.password) {
        return false;
      }
    },
    msgPassword(val) {
      if(val.length<4) {
        return "密码长度不少于4位数";
      }else{
        return "请填写密码";
      }
    },
    // 第二次输入密码 错误提示
    msgPassword2(val) {
      if(val != this.password) {
        return '两次密码输入不一致';
      }else{
        return "请再次填写密码";
      }
    },

    // 清空密码
    clearForm() {
      this.password = '';
      this.password2 = '';
    },

    clickBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.an-edit-password{
    .an-form{
        padding: 15px 0;
    }
}
</style>